<ng-container *ngIf="!outlet.isActivated">
    <div class="px-5 py-2 mt-4 bg-white">
        <div class="text-right m-btn my-5 mr-5">
            <button class="btn sm btn-success" routerLink="/purchase/contract/detail/{{supplierId}}">
                <span>合同商品</span>
            </button>
            <button class="btn sm btn-success" routerLink="/purchase/contract/detail/{{supplierId}}">
                <span>采购条款</span>
            </button>
        </div>
        <div style="position: relative;">
            <h4 style="font-size: 1.1rem;font-weight:400;" class="mt-5 mb-5 text-center">**公司采购单</h4>
            <div style="width:100px;height:100px;background:#ccc; position:absolute;top: 0;right: 0;"></div>
        </div>
        <div class="row">
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">订单日期</span>
                </div>
                <input [(ngModel)]="newList.orderDate" type="text" class="form-control">
            </div>
            <div *ngIf="!orderId" class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">供应商</span></div>
                <div class="border-l-0 border-r-0 radius-0 border-t-0 form-control p-0 bg">
                    <select [(ngModel)]="newList.supplierId" class="bg custom-select border-0" title="请选择供应商">
                        <option *ngFor="let su of supplier" [ngValue]="su.id">{{su.supplierName}}</option>
                    </select>
                </div>
            </div>
            <div *ngIf="orderId" class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">供应商</span>
                </div>
                <input [(ngModel)]="newList.supplierName" type="text" class="form-control">
            </div>
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">余额</span>
                </div>
                <input [(ngModel)]="newList.balance" type="text" class="form-control">
            </div>
            <div class="input-group mb-3 col">
            </div>
        </div>
        <div class="row">
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">运输公司</span>
                </div>
                <input [(ngModel)]="newList.transportCompany" type="text" class="form-control">
            </div>
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">预计到货日期</span>
                </div>
                <input [(ngModel)]="newList.estimatedArrivalDate" type="text" class="form-control">
            </div>
            <div *ngIf="!orderId" class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">入库仓库</span></div>
                <div class="border-l-0 border-r-0 radius-0 border-t-0 form-control p-0 bg">
                    <select [(ngModel)]="newList.inWarehouseId" class="bg custom-select border-0" title="请选择入库仓库">
                        <option *ngFor="let w of warehouse" [ngValue]="w.id">{{w.warehouseName}}</option>
                    </select>
                </div>
            </div>
            <div *ngIf="orderId" class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">入库仓库</span>
                </div>
                <input [(ngModel)]="newList.inWarehouseName" type="text" class="form-control">
            </div>
            <div *ngIf="!orderId" class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">采购员</span></div>
                <div class="border-l-0 border-r-0 radius-0 border-t-0 form-control p-0 bg">
                    <select [(ngModel)]="newList.buyerId" class="bg custom-select border-0" title="请选择采购员">
                        <option *ngFor="let p of people" [ngValue]="p.id">{{p.staffName}}</option>
                    </select>
                </div>
            </div>
            <div *ngIf="orderId" class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">采购员</span>
                </div>
                <input [(ngModel)]="newList.buyerName" type="text" class="form-control">
            </div>
        </div>
        <div class="row">
            <div *ngIf="!orderId" class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">区域</span></div>
                <div class="border-l-0 border-r-0 radius-0 border-t-0 form-control p-0 bg">
                    <select [(ngModel)]="newList.areaId" class="bg custom-select border-0" title="请选择区域">
                        <option *ngFor="let a of area" [ngValue]="a.id">{{a.county}}</option>
                    </select>
                </div>
            </div>
            <div *ngIf="orderId" class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">区域</span>
                </div>
                <input [(ngModel)]="newList.areaName" type="text" class="form-control">
            </div>
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">体积</span>
                </div>
                <input [(ngModel)]="newList.volume" type="text" class="form-control">
            </div>
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">重量</span>
                </div>
                <input [(ngModel)]="newList.weight" type="text" class="form-control">
            </div>
            <div *ngIf="!orderId" class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">申请人</span></div>
                <div class="border-l-0 border-r-0 radius-0 border-t-0 form-control p-0 bg">
                    <select [(ngModel)]="newList.applicantId" class="bg custom-select border-0" title="请选择申请人">
                        <option *ngFor="let p of people" [ngValue]="p.id">{{p.staffName}}</option>
                    </select>
                </div>
            </div>
            <div *ngIf="orderId" class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">申请人</span>
                </div>
                <input [(ngModel)]="newList.applicantName" type="text" class="form-control">
            </div>
        </div>
        <div class="row">
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">采购数量</span>
                </div>
                <input [(ngModel)]="newList.purchaseAmount" type="text" class="form-control">
            </div>
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">采购箱数</span>
                </div>
                <input [(ngModel)]="newList.purchaseBoxAmount" type="text" class="form-control">
            </div>
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">单据金额</span>
                </div>
                <input [(ngModel)]="newList.amountOfDocuments" type="text" class="form-control">
            </div>
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">整单折扣</span>
                </div>
                <input [(ngModel)]="newList.wholeSingleDiscount" type="text" class="form-control">
            </div>
        </div>
        <div class="row">
            <div *ngIf="!orderId" class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">采购方式</span></div>
                <div class="border-l-0 border-r-0 radius-0 border-t-0 form-control p-0 bg">
                    <select [(ngModel)]="newList.purchaseMode" class="bg custom-select border-0" title="请选择采购方式">
                        <option [ngValue]="0">现场采购</option>
                        <option [ngValue]="1">非现场采购</option>
                    </select>
                </div>
            </div>
            <div *ngIf="orderId" class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">采购方式</span>
                </div>
                <input [(ngModel)]="newList.purchaseMode" type="text" class="form-control">
            </div>
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">供应商联系电话</span>
                </div>
                <input [(ngModel)]="newList.supplierMobile" type="text" class="form-control">
            </div>
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">合同任务</span>
                </div>
                <input [(ngModel)]="newList.contractTask" type="text" class="form-control">
            </div>
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">年度累采</span>
                </div>
                <input [(ngModel)]="newList.annualTiredMining" type="text" class="form-control">
            </div>
        </div>
    </div>
    <div class="p-2  bg-white">
        <div class="card-body" style="width: 100%; overflow-x: auto;">
            <div class="text-right m-btn my-5 mr-5">
                <button tsBtn sm color="success" (click)="addPad.showAnimate()">新增</button>
            </div>
            <!-- <h4 style="font-size: 1.1rem;font-weight:400;" class="mt-5 mb-5 text-center">商品列表</h4> -->
            <table class="table table-striped">
                <tr class="font-weight-bold bg-light">
                    <td *ngFor="let th of orderTh">{{th}}</td>
                    <!-- <td>{{orderTh}}</td> -->
                </tr>
                <tbody>
                    <tr [class.d-none]="listGoods.length>0||orderId" *ngFor="let item of listGoods;index as i">
                        <td>{{i+1}}
                        </td>
                        <td>
                            <input [(ngModel)]="item.goodsNumber" [readonly]="item.isChange" type="text" [class]="item.isChange?'form-control-plaintext':'form-control'">
                        </td>
                        <td>
                            <ts-select style="width:200px" [(ngModel)]="item.goodsId" [disabled]="item.isChange" [placeholder]="item.goodsName" [searchFunc]="searchGoods" [class]="item.isChange?'form-control-plaintext':''"></ts-select>
                        </td>
                        <td>
                            <input [(ngModel)]="item.barCode" [readonly]="item.isChange" type="text" [class]="item.isChange?'form-control-plaintext':'form-control'">
                        </td>
                        <td>
                            <input [(ngModel)]="item.manufactorNumber" [readonly]="item.isChange" type="text" [class]="item.isChange?'form-control-plaintext':'form-control'">
                        </td>
                        <td>
                            <input [(ngModel)]="item.unit" [readonly]="item.isChange" type="text" [class]="item.isChange?'form-control-plaintext':'form-control'">
                        </td>
                        <td>
                            <!-- <div class="input-group col">
                                <div class="border-0 radius-0 form-control p-0">
                                    <select [(ngModel)]="goods.goodsParentType" class="bg-white custom-select border-0" title="请选择">
                    <option *ngFor="let type of parentTypes" [ngValue]="type.value">111</option>
                  </select>
                                </div>
                            </div> -->
                            <input [(ngModel)]="item.flavorColor" [readonly]="item.isChange" type="text" [class]="item.isChange?'form-control-plaintext':'form-control'">
                        </td>
                        <td>
                            <!-- <div class="input-group col">
                                <div class="border-0 radius-0 form-control p-0">
                                    <select [(ngModel)]="goods.goodsParentType" class="bg-white custom-select border-0" title="请选择">
                    <option *ngFor="let type of parentTypes" [ngValue]="type.value">111</option>
                  </select>
                                </div>
                            </div> -->
                            <input [(ngModel)]="item.specificationsDimensions" [readonly]="item.isChange" type="text" [class]="item.isChange?'form-control-plaintext':'form-control'">
                        </td>
                        <td>
                            <input [(ngModel)]="item.amount" [readonly]="item.isChange" type="text" [class]="item.isChange?'form-control-plaintext':'form-control'">
                        </td>
                        <td>
                            <input [(ngModel)]="item.boxAmount" [readonly]="item.isChange" type="text" [class]="item.isChange?'form-control-plaintext':'form-control'">
                        </td>
                        <td>
                            <input [(ngModel)]="item.price" [readonly]="item.isChange" type="text" [class]="item.isChange?'form-control-plaintext':'form-control'">
                        </td>
                        <td>
                            <input [(ngModel)]="item.money" [readonly]="item.isChange" type="text" [class]="item.isChange?'form-control-plaintext':'form-control'">
                        </td>
                        <td>
                            <input [(ngModel)]="item.taxRate" [readonly]="item.isChange" type="text" [class]="item.isChange?'form-control-plaintext':'form-control'">
                        </td>
                        <td>
                            <input [(ngModel)]="item.remarks" [readonly]="item.isChange" type="text" [class]="item.isChange?'form-control-plaintext':'form-control'">
                        </td>
                        <td>
                            <input [(ngModel)]="item.boxBarCode" [readonly]="item.isChange" type="text" [class]="item.isChange?'form-control-plaintext':'form-control'">
                        </td>
                        <td>
                            <input [(ngModel)]="item.brandId" [readonly]="item.isChange" type="text" [class]="item.isChange?'form-control-plaintext':'form-control'">
                        </td>
                        <!-- <span *ngIf="td.isActive===1" class="badge badge-success badge-pill">启用</span>
                                    <span *ngIf="td.isActive!==1" class="badge badge-secondary badge-pill">停用</span> -->

                        <td style="white-space: nowrap;">

                            <span *ngIf="!item.isChildSave" (click)="item.isChange = false; item.isChildSave = !item.isChildSave;" tsTip="编辑" class="btn-icon btn-icon-info">
                                <i tsIcon="edit"></i>
                            </span>
                            <span *ngIf="item.isChildSave" (click)="item.isChange = true; item.isChildSave = !item.isChildSave;" tsTip="保存" class="btn-icon btn-icon-info">
                                <i tsIcon="save"></i>
                            </span>
                            <span (click)="confirmDelete()" tsTip="删除" class="btn-icon btn-icon-danger">
                                <i tsIcon="delete"></i>
                            </span>

                        </td>
                    </tr>
                    <tr [class.d-none]="!(isAddTr && orderId)" #addPad="appAnimate" appAnimate="flash">
                        <td style="color:red;">*
                            <!-- <img tsImg [src]="td.goodsThumb" dataSrc="assets/images/404.jpg" class="rounded-circle" width="40" height="40" alt="Logo"> -->
                        </td>
                        <!-- <td>
                                                <input [value]="1" [(ngModel)]="item.goodsNumber" [readonly]="isChange" type="text" [class]="isChange?'form-control-plaintext':'form-control'">
                                            </td> -->
                        <td>
                            <input [(ngModel)]="newGoods.goodsNumber" type="text" [class]="newGoods.isChange?'form-control-plaintext':'form-control'">
                        </td>
                        <td>
                            <ts-select style="width:200px" [(ngModel)]="newGoods.selectedGoods" placeholder="请选择商品" emptyLabel="没有查询到匹配的商品" [searchFunc]="searchGoods"></ts-select>
                        </td>
                        <td>
                            {{newGoods.selectedGoods?.goodsBarCode}}
                            <!-- <input [(ngModel)]="newGoods.barCode" type="text" class="form-control"> -->
                        </td>
                        <td>
                            <input [(ngModel)]="newGoods.manufactorNumber" type="text" class="form-control">
                        </td>
                        <!-- {{td.createdAt.substring(0,10)|date:'yyyy/MM/dd'}} -->
                        <td>
                            <input [(ngModel)]="newGoods.unit" type="text" class="form-control">
                        </td>
                        <td>
                            <!-- <div class="input-group col">
                                                    <div class="border-0 radius-0 form-control p-0">
                                                        <select [(ngModel)]="goods.goodsParentType" class="bg-white custom-select border-0" title="请选择">
                                        <option *ngFor="let type of parentTypes" [ngValue]="type.value">111</option>
                                      </select>
                                                    </div>
                                                </div> -->
                            <input [(ngModel)]="newGoods.flavorColor" type="text" class="form-control">
                        </td>
                        <td>
                            <!-- <div class="input-group col">
                                                    <div class="border-0 radius-0 form-control p-0">
                                                        <select [(ngModel)]="goods.goodsParentType" class="bg-white custom-select border-0" title="请选择">
                                        <option *ngFor="let type of parentTypes" [ngValue]="type.value">111</option>
                                      </select>
                                                    </div>
                                                </div> -->
                            <input [(ngModel)]="newGoods.specificationsDimensions" type="text" class="form-control">
                        </td>
                        <td>
                            <input [(ngModel)]="newGoods.amount" type="text" class="form-control">
                        </td>
                        <td>
                            <input [(ngModel)]="newGoods.boxAmount" type="text" class="form-control">
                        </td>
                        <td>
                            <input [(ngModel)]="newGoods.price" type="text" class="form-control">
                        </td>
                        <td>
                            <input [(ngModel)]="newGoods.money" type="text" class="form-control">
                        </td>
                        <td>
                            <input [(ngModel)]="newGoods.taxRate" type="text" class="form-control">
                        </td>
                        <td>
                            <input [(ngModel)]="newGoods.remarks" type="text" class="form-control">
                        </td>
                        <td>
                            <input [(ngModel)]="newGoods.boxBarCode" type="text" class="form-control">
                        </td>
                        <td>
                            <input [(ngModel)]="newGoods.brandId" type="text" class="form-control">
                        </td>
                        <!-- <span *ngIf="td.isActive===1" class="badge badge-success badge-pill">启用</span>
                                                        <span *ngIf="td.isActive!==1" class="badge badge-secondary badge-pill">停用</span> -->
                        <td style="white-space: nowrap;">
                            <!-- <span (click)="addTr()" tsTip="添加商品" class="btn-icon btn-icon-success">
                                    <i tsIcon="add"></i>
                                  </span>
                                                <span *ngIf="!isChildSave" (click)="isChildSave=!isChildSave;isChange=false;" tsTip="编辑" class="btn-icon btn-icon-info">
                                    <i tsIcon="edit"></i>
                                  </span> -->
                            <!-- <span *ngIf="isChildSave" (click)="isChildSave=!isChildSave;isChange=true;" tsTip="保存" class="btn-icon btn-icon-info">
                                    <i tsIcon="save"></i>
                                  </span> -->
                            <span (click)="childSave()" tsTip="保存" class="btn-icon btn-icon-info">
                                <i tsIcon="save"></i>
                            </span>
                            <span (click)="childDelete()" tsTip="删除" class="btn-icon btn-icon-danger">
                                <i tsIcon="delete"></i>
                            </span>

                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="row py-4">
                <span class="col-sm-6 text-center">合计</span>
                <span class="col-sm-2 text-center">数量</span>
                <span class="col-sm-2 text-center">箱数</span>
                <span class="col-sm-2 text-center">金额</span>
            </div>

        </div>
        <div class="text-right">
            <ts-pagination (pageChange)="loadDatas()" [pagination]="pagination" [items]="[{text:'显示 5 条',value:5},{text:'显示 10 条',value:10},{text:'显示 20 条',value:20}]" [color]="global.params.color" goTitle="跳转" prevTitle="上一页" nextTitle="下一页" startTitle="首页" endTitle="末尾"
                outline></ts-pagination>
        </div>
    </div>

    <div class="my-5 m-btn text-right pr-5">
        <button routerLink="/purchase/order" tsBtn color="white">返回列表</button>
        <button *ngIf="!orderId" tsBtn loading color="success" (submit)="confirmInsert($event)">tian确定</button>
        <button *ngIf="orderId" tsBtn loading color="success" (submit)="updateList($event)">确定</button>
        <!-- updateGoods -->
        <button routerLink="/purchase/order" tsBtn color="danger">取消</button>
        <!-- <button tsBtn color="success" (click)="resetForm()">新增</button> -->
        <button tsBtn color="warning" (click)="resetForm()">打印</button>
        <button tsBtn loading color="primary" (submit)="confirmUpdate($event)">分享</button>
    </div>
</ng-container>

<router-outlet #outlet="outlet"></router-outlet>